<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">
    <title>jQuery Test Unit</title>
        <style type="text/css">
            .actor {
                border: 1px solid gray;
            } .class1 {
                background-color: red;
            } .class2 {
                background-color: blue;
            } .class3 {
                background-color: gray;
            }
			.wrap {
				border:1px solid #c0c0c0;
				background-color:#800000;;
				color:white;
			}
        </style>
        <script type="text/javascript" src="../lib/jquery/jquery.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function(){
                $(".actor").fadeOut();
                $("#fadeOutBtn").bind("click", function(){
                    $(".actor").fadeOut();
                });
                $("#fadeInBtn").bind("click", function(){
                    $(".actor").fadeIn();
                });
                $("#paintBtn").bind("click", function(){
                    $(".actor").css("background-color", "red");
                    $("table th").css("background-color", "gray");
                    $("table ~ table").css("background-color", "green");
                    $("div:last").css("background-color", "blue").css("color", "white");
                    $("table td:first").css("background-color", "orange");
                    $("table td:last").css("background-color", "white");
                    $("#firstTb td:even").css("background-color", "white");
                    $("#firstTb td:odd").css("background-color", "yellow");
                    $("#secondTb td:even").css("background-color", "#ccc");
                    $("#secondTb td:odd").css("background-color", "yellow");
                    $("td:contains('contain')").css("background-color", "red");
                });
                function clearHandler(){
                    $("table").css("background-color", "white");
                    $("table td").css("background-color", "white");
                    $("table th").css("background-color", "white");
                };
                function fillHandler(){
                    $("td").html("<span>This is empty td</span>");
                }
                $("#clearBtn").bind("click", clearHandler);
                $("#fillBtn").bind("click", fillHandler);
                var i = 0;
                var size = 1;
                $("#zoomInBtn").bind("click", function(){
                    i = i % 3;
                    var j = i + 1;
                    size += 0.2;
                    $("#secondDiv ul li:nth-child(" + j + ")").css("font-size", size + "em");
                    i++;
                });
                $("#zoomOutBtn").bind("click", function(){
                    i = i % 3;
                    var j = i + 1;
                    size -= 0.2;
                    if (size < 1) {
                        size = 1;
                    }
                    $("#secondDiv ul li:nth-child(" + j + ")").css("font-size", size + "em");
                    i++;
                });
                $("#checkBtn").bind("click", function(){
                    var inputjQ = $("#forthDiv input[name^='new'][name$='accept']");
                    var value = inputjQ.attr("checked");
                    if (value) {
                        inputjQ.attr("checked", false);
                    }
                    else {
                        inputjQ.attr("checked", true);
                    }
                })
            });
        </script>
    </head>
    <body>
        <div>
            <div>
                <h5>Selector Test Case</h5>
                <button type="button" id="fadeOutBtn">
                    Fade out
                </button>
                <button type="button" id="fadeInBtn">
                    Fade In
                </button>
                <button type="button" id="paintBtn">
                    Paint Color
                </button>
                <button type="button" id="clearBtn">
                    Clear Color
                </button>
                <button type="button" id="fillBtn">
                    Fill Element
                </button>
                <button type="button" id="zoomInBtn">
                    Zoom In
                </button>
                <button type="button" id="zoomOutBtn">
                    Zoom Out
                </button>
                <button type="button" id="checkBtn">
                    Set Attribute 
                </button>
            </div>
            <hr size="1" noshade="noshade" />
            <div id="contain">
                <div id="firstDiv" class="actor">
                    <table id="firstTb" border="0" cellspacing="5" cellpadding="5" width="100%">
                        <tr>
                            <th height="25">
                                First Table
                            </th>
                        </tr>
                        <tr>
                            <td height="10">
                            </td>
                        </tr>
                        <tr>
                            <td height="10">
                            </td>
                        </tr>
                        <tr>
                            <td height="10">
                            </td>
                        </tr>
                        <tr>
                            <td height="10">
                            </td>
                        </tr>
                    </table>
                    <table id="secondTb" border="0" cellspacing="5" cellpadding="5" width="100%">
                        <tr>
                            <th height="25">
                                Second Table
                            </th>
                        </tr>
                        <tr>
                            <td height="10">
                                contain
                            </td>
                        </tr>
                        <tr>
                            <td height="10">
                            </td>
                        </tr>
                        <tr>
                            <td height="10">
                            </td>
                        </tr>
                        <tr>
                            <td height="10">
                            </td>
                        </tr>
                        <tr>
                            <td height="10">
                            </td>
                        </tr>
                        <tr>
                            <td height="10">
                            </td>
                        </tr>
                        <tr>
                            <td height="10">
                            </td>
                        </tr>
                        <tr>
                            <td height="10">
                            </td>
                        </tr>
                        <tr>
                            <td height="10">
                            </td>
                        </tr>
                    </table>
                </div>
                <div id="secondDiv">
                    <ul>
                        <li>
                            John
                        </li>
                        <li>
                            Karl
                        </li>
                        <li>
                            Brandon
                        </li>
                    </ul>
                    <ul>
                        <li>
                            Glen
                        </li>
                        <li>
                            Tane
                        </li>
                        <li>
                            Ralph
                        </li>
                    </ul>
                    <ul>
                        <li>
                            Glen
                        </li>
                    </ul
                </div>
                <div id="forthDiv">
                    <input type="checkbox" name="newsletter" value="Hot Fuzz" />Hot Fuzz<input type="checkbox" name="newsletter" value="Cold Fusion" />Cold Fusion<input type="checkbox" name="newsaccept" value="Evil Plans" />Evil Plans
                </div>
                <div id="lastDiv">
                    Next Div
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#attrBtn").bind("click", function(){
                    var imgNode = $("#attrDiv img");
                    imgNode.attr({
                        src: "http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif",
                        alt: "jQuery Logo"
                    });
                    imgNode.attr("title", function(){
                        return this.src;
                    });
                    imgNode.removeAttr("title");
                });
                
                $("#cssBtn").bind("click", function(){
                    $("#attrDiv table td:last").addClass("class3");
                });
                $("#cssBtn").bind("click", function(){
                    $("#attrDiv table td:first").toggleClass("class1");
                });
            });
        </script>
        <div>
            <div>
                <h5>Attribute Test Case</h5>
                <button type="button" id="attrBtn">
                    Attribute Setting
                </button>
                <button type="button" id="cssBtn">
                    Css Setting
                </button>
            </div>
            <hr size="1" noshade="noshade" />
            <div id="attrDiv">
                <img alt="Loading jQuery Logo"/>
                <table width="100%">
                    <tr>
                        <th>
                        </th>
                    </tr>
                    <tr>
                        <td>
                            class 1
                        </td>
                    </tr>
                    <tr>
                        <td class="class2">
                            class 2
                        </td>
                    </tr>
                    <tr>
                        <td>
                            class 3
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <script type="application/javascript">
            $(function(){
                $("#filterBtn").bind("click", function(){
                    $("#filterDiv p").filter(".selected, :first").css("background-color", "red");
                    
                });
                $("#mappingBtn").bind("click", function(){
                    $("#mapingDiv p").append($("input").map(function(){
                        return $(this).val();
                    }).get().join(","));
                });
                $("#searchingBtn").bind("click", function(){
                    var nodes = $("#addingDiv p").add("span");
                    var _nodes = $("#addingDiv p").add("<br/><span>Again</span>");
                    $("#console").append(_nodes).css("background-color", "red");
                    ;
                })
            })
        </script>
        <div>
            <div>
                <h5>Filter Test Case</h5>
                <button type="button" id="filterBtn">
                    Selecting Filter
                </button>
                <button type="button" id="mappingBtn">
                    Mapping Filter
                </button>
                <button type="button" id="searchingBtn">
                    Search Filter
                </button>
            </div>
            <hr size="1" noshade="noshade" />
            <div id="filterDiv">
                <p>
                    Hello
                </p>
                <p>
                    Hello Again
                </p>
                <p class="selected">
                    And Again
                </p>
            </div>
            <div id="mapingDiv">
                <p>
                    <b>Values: </b>
                </p>
                <form>
                    <input type="text" name="name" value="John"/><input type="text" name="password" value="password"/><input type="text" name="url" value="http://ejohn.org/"/>
                </form>
            </div>
            <div id="addingDiv">
                <p>
                    Hello
                </p>
                <span>Hello Again</span>
            </div>
        </div>
        <script type="application/javascript">
            $(function(){
                $("#appendBtn").bind("click", function(){
                    $("#appendDiv p").prepend("<b>Allen Wang: </b>");
                    $("#appendDiv p").append("<b> date</b>");
                    $("#appendDiv span").after("<b> :-)</b>");
                });
                $("#wrapBtn").bind("click", function(){
                    //$("#wrapDiv p").wrap("<div class='wrap'></div>");
					//$("#wrapDiv p").wrap($("#wrapNode").addClass("wrap"));
					$("#wrapInnerDiv p").wrapInner("<b></b>");
                });
				$("#replaceBtn").bind("click", function(){
					$("#replaceDiv p").replaceWith("<b>Paragraph. </b>");
                });
            })
        </script>
        <div>
            <div>
                <h5>Content Test Case</h5>
                <button type="button" id="appendBtn">
                    Append Document
                </button>
                <button type="button" id="wrapBtn">
                    Wrap Document
                </button>
				<button type="button" id="replaceBtn">
                    Replace Document
                </button>
            </div>
            <hr size="1" noshade="noshade" />
            <div id="appendDiv">
                <span>I would like to say: </span>
                <p>
                    Hi
                </p>
                <span>I would like to say: </span>
                <p>
                    How are you
                </p>
                <span>I would like to say: </span>
                <p>
                    What
                </p>
            </div>
            <div id="wrapDiv">
                <p>
                    Test Paragraph.
                </p>
				<div id="wrapNode">
				</div>
            </div>
			<div id="wrapInnerDiv">
				<p>Hello</p><p>cruel</p><p>World</p>
			</div>
			<div id="replaceDiv">
				<p>How</p><p>Are</p><p>You</p>
			</div>
        </div>
        <hr size="1" noshade="noshade">
		<script type="application/javascript">
            $(function(){
                $("#offsetBtn").one("click", function(){
					//$("#console").empty();
					var p = $("#offsetDiv p:last");
					var offset = p.offset();
					$("#console").append( "left: " + offset.left + ", top: " + offset.top );
					var _p = $("#offsetDiv p:first");
					$("#console").append(", scrollTop:" + _p.scrollTop()+", height:"+_p.height()+", width:"+_p.width());
                });
            })
        </script>
		<div>
            <div>
                <h5>CSS Test Case</h5>
                <button type="button" id="offsetBtn">
                    CSS Offset 
                </button>
            </div>
            <hr size="1" noshade="noshade" />
            <div id="offsetDiv">
              	<p>Hello World</p><p>2nd Paragraph</p>
            </div>
        </div>
		<hr size="1" noshade="noshade">
		<script type="application/javascript">
			 $(function(){
			 	$("#queueBtn").bind("click",function(){
					$("#show").click(function () {
     				 	var n = $("div").queue("fx");
      					$("span").text("Queue length is: " + n.length);
					});
					function runIt() {
      						$(".queue div").show("slow");
      						$(".queue div").animate({left:'+=200'},2000);
      						$(".queue div").slideToggle(1000);
      						$(".queue div").slideToggle("fast");
      						$(".queue div").animate({left:'-=200'},1500);
      						$(".queue div").hide("fast");
      						$(".queue div").show(1200);
      						$(".queue div").slideUp("normal", runIt);
						}
						runIt();
				});			 	
			 })
        </script>
		<style>
  			.queue div { 
				margin:3px;
				width:40px;
				height:40px;
        		position:absolute; 
				left:0px; 
				top:30px; 
        		background:green; 
				display:none; 
			}
  			.queue div.newcolor { 
				background:blue; 
			}
  			.queue span { 
				color:red; 
			}
  		</style>
		<div>
            <div>
                <h5>Data Cache Test Case</h5>
                <button type="button" id="queueBtn">
                    Using Queue
                </button>
            </div>
            <div class="queue">
            	<button id="show">Show Length of Queue</button>
  				<span></span>
				<div></div>
            </div>
        </div>
		<hr size="1" noshade="noshade">
        <div id="console">
            <b>Value:</b>
        </div>
    </body>
</html>
